<template lang="pug">
.seller-page-wrapper
  .head
    .title {{seller.name}}
    .star-rating-count
      .star-container
        Star(:size=36 :score="seller.score")
      span.rating-count ({{seller.ratingCount}})
      span.sell-count 月售{{seller.sellCount}}单
    .line
    ul.price-time
      li.block
        .label 起送价
        .content-wrapper
          span.number {{seller.minPrice}}
          span.unit 元
      li.block
        .label 商家配送
        .content-wrapper
          span.number {{seller.deliveryPrice}}
          span.unit 元
      li.block
        .label 平均配送时间
        .content-wrapper
          span.number {{seller.deliveryTime}}
          span.unit 分钟
    .favorite(@click='toggleFavorite')
      .icon.iconfont.iconfavorite(:class="{'active':favorite}")
      .label {{favoriteLabel}}
    Split
  .seller-scroll-wrapper
    cube-scroll.seller-outer-scroll
      .bulletin-wrapper
        .title 公告与活动
        .bulletin {{seller.bulletin}}
        ul.supports
          li.support(v-for="(support,index) in seller.supports" :key="index")
            SupportIcon(:type="support.type" :size=4)
            .description {{support.description}}
      Split
      .seller-pics-wrapper
        .title 商家实景
        //- stopPropagation: true:阻止事件冒泡，防止横向拖拽图片scroll时，触发父层tab页滑动换页
        cube-scroll.seller-inner-scroll(:data="seller.pics"
                    direction="horizontal"
                    nest-mode="free"
                    :options={
                      stopPropagation: true}
                    )
          ul.pic-list-wrapper
            li.pic-wrapper(v-for="(pic,index) in seller.pics")
              img.pic(:src="pic")
      Split
      .seller-info
        .title 商家信息
        ul.infos
          li.info(v-for="(info,index) in seller.infos" :key="index") {{info}}
            .line
</template>

<script>
import {mapState} from 'vuex'
import Split from '../split/split'
import Star from '../star/star'
import SupportIcon from '../support-icon/support-icon'

//- if(process.browser) {
//-   const st = require('../../static/common/util/storage')
//-   //- import { saveToLocal, loadFromLocal } from '../../static/common/util/storage'
//- }

import { saveToLocal, loadFromLocal } from '../../static/common/util/storage'
//- import dynamic from 'next/dynamic'
//- const { saveToLocal, loadFromLocal } = dynamic(
//-   import('../../static/common/util/storage'),
//-   {
//-     ssr: false   //这个要加上,禁止使用 SSR
//-   }
//- )


export default {
  
  data() {

    return {
      favorite: false
    }

  },

  computed: {
    // 全局变量
    ...mapState({
      // 商品列表
      seller: 'seller',
    }),

    favoriteLabel() {
      return this.favorite?'已收藏':'未收藏'
    }
  },

  methods: {

    //- 获取数据
    async fetch() {
      
      //- 用vue的route对象从url中获取查询参数
      const sellerId = this.$route.query.id

      await this.$store.dispatch('getSeller', sellerId)
      console.log('获取Seller')
      console.log(this.seller)
    },

    //- 切换收藏状态
    toggleFavorite() {
      this.favorite = !this.favorite

      console.log(`favorite:${this.favorite}`)

      //- 将favorite存入localStorage
      //- if(process.browser) {
      //-   const st = require('../../static/common/util/storage')
      //-   //- import { saveToLocal, loadFromLocal } from '../../static/common/util/storage'
      //- }
      saveToLocal(this.seller.id, 'favorite', this.favorite)
      //- console.log(saveToLocal)
    }
  },

  components: {
    Star,
    Split,
    SupportIcon
  },

  mounted() {
    console.log('进入mounted')
    this.favorite = loadFromLocal(this.seller.id, 'favorite', false)
  }

}
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.seller-page-wrapper
  position:absolute
  top:0
  left:0
  width:100%
  height:100%
  display:flex
  flex-direction:column
  .head
    flex:0
    margin:18px 18px 0 18px
    .title
      font-size:$fontsize-large-xx
    .star-rating-count
      margin-top:8px
      .star-container
        display:inline-block
        line-height:20px
        vertical-align:top
      .rating-count
        display:inline-block
        vertical-align:top
        line-height:20px
        margin-left:8px
        color:$color-light-grey
      .sell-count
        display:inline-block
        vertical-align:top
        line-height:20px
        margin-left:12px
        color:$color-light-grey
    .line
      border-top:1px solid $color-light-grey-s
      margin-top:18px
    .price-time
      display:flex
      .block
        display:inline-block
        flex:1
        margin-top:18px
        margin-bottom:18px
        text-align:center
        border-right:1px solid $color-light-grey-s
        &:last-child
          border:none
        .label
          color:$color-light-grey
          font-size:$fontsize-medium
        .content-wrapper
          margin-top:4px
          .number
            font-size:$fontsize-large-xxx
          .unit
            font-size:$fontsize-small
    .favorite
      position:absolute
      right:18px
      top:18px
      .icon
        text-align:center
        font-size:$fontsize-large-xxx
        color:$color-light-grey
        &.active
          color:$color-red
      .label
        margin-top:4px
        font-size:$fontsize-medium
  .seller-scroll-wrapper
    //- 动态的获得父容器的剩余宽度
    flex:1
    //- 不会被自己的子元素把内容撑开
    //- 否则被子元素撑开，导致cube-scroll不能滚动
    overflow:hidden
    margin:18px 18px
    .bulletin-wrapper
      .title
        font-size:$fontsize-large-xx
      .bulletin
        margin:8px 12px 16px 12px
        white-space:normal
        color:$color-red
        font-size:$fontsize-medium-x
        line-height: 24px
      .supports
        .support
          padding:16px 16px
          border-top:1px solid $color-light-grey-s
          .support-icon
            display:inline-block
            line-height:16px
            vertical-align:top
          .description
            display:inline-block
            line-height:16px
            vertical-align:top
            margin-left:6px
            font-size:$fontsize-medium
    .seller-pics-wrapper
      margin:18px 0 18px 18px
      .title
        font-size:$fontsize-large-xx
        margin-bottom:12px
      .seller-inner-scroll
        >>> .cube-scroll-content
          display: inline-block
          .pic-list-wrapper
            white-space:nowrap
            .pic-wrapper
              display:inline-block
              margin-right:6px
              &:last-child
                margin-right:0
              .pic
                width:120px
                height:90px
    .seller-info
      margin:12px 12px
      .title
        font-size:$fontsize-large-xx
      .infos
        margin:12px 12px
        .info
          border-top:1px solid $color-light-grey-s
          padding:16px 0
          white-space:normal
          line-height:24px

</style>